<!-- 头像 -->

<template>
    <div class="user-header">
        <el-dropdown @command="handerCommand">
            <span class="el-dropdown-link">
                <el-avatar shape="circle" :size="28" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </span>
            <template #dropdown>
                <el-dropdown-item :icon="UserFilled" :command="0">个人信息</el-dropdown-item>
                <el-dropdown-item :icon="Unlock" :command="1">修改密码</el-dropdown-item>
                <el-dropdown-item :icon="Right" :command="2">注销登录</el-dropdown-item>
            </template>
        </el-dropdown>
    </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import { useUserStore } from '@/stores/admin';
import { UserFilled, Unlock, Right } from '@element-plus/icons-vue';
import jsCookie from 'js-cookie'

const store = useUserStore();
const user = store.user

/**
 * 下拉框的3个功能
 * @param e 事件源，用于switch条件判断
 */
const handerCommand = (e: number) => {
    switch (e) {

        // 个人信息
        case 0:
            router.push("/index/userinfo")
            break;

        // 修改密码
        case 1:
            router.push("/index/modifypassword")
            break;

        // 注销登录
        case 2:
            jsCookie.remove("token")    //删除cookie
            store.loginOut()
            break;
        default:
            break;
    }
}
</script>